<template>
  <div class="film-item">
    <div class="left">
      <img :src="filmInfo.poster" alt="">
    </div>
    <div class="center">
      <h2 class="title">{{ filmInfo.name }}</h2>
      <p class="grade" :style="{'visibility' : filmInfo.grade ? '' : 'hidden'}">观众评分：{{ filmInfo.grade }}</p>
      <p class="actors">主演:{{filmInfo.actors | formatActors}}</p>
      <p class="info">{{ filmInfo.nation }} | {{ filmInfo.runtime }}</p>
    </div>
    <div class="right">
       <button class="buy" v-show="filmType === 'nowPlaying'">购票</button>
      <button class="buy" v-if="filmInfo.isPresale" v-show="filmType === 'comingSoon'">预购</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilmItem',
  props: {
    filmInfo: {
      type: Object,
      default () {
        return []
      }
    },
    filmType: {
      validator (value) {
        return ['nowPlaying', 'comingSoon'].indexOf(value) !== -1
      }
    }
  },
  watch: {
    filmInfo (filmInfo) {
      console.log(filmInfo)
    }
  },
  filters: {
    formatActors (value) {
      let tmp = value.map(item => item.name)
      return tmp.join(' ')
    }
  }
}
</script>

<style lang="scss">
@import '~@/assets/style/mixins.scss';

.film-item {
  @include border-bottom;
  display: flex;
  align-items: center;
  padding: 15px 15px 15px 0;
  height: 94px;

  .left {
    width: 66px;
    flex-shrink: 0;

    img {
      width: 100%;
    }
  }

  .right {
    display: flex;
    align-items: center;
    width: 50px;
    flex-shrink: 0;

    button {
      width: 50px;
      height: 25px;
      color: #ff5f16;
      background: #fff;
      border:1px solid #ff5f16
    }
  }

  .center {
    flex: 1;
    line-height: 1.5;
    padding: 0 15px;
    overflow: hidden;

    .title {
      font-weight: bold;
    }

    p {
      height: 24px;
      line-height: 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
